<template>
	<view class="lucky-prize-pool">
		<navigator class="lpp_real_name" hover-class="none" url="/pages/my/certification/certification?isRealName=false">
			<text class="lpp_word">请在奖池开奖前进行实名验证否则无法参与奖池活动</text>
			<view class="red_right">前往实名 <image src="/static/wallet/red_right.png" ></image> </view>
		</navigator>
		<view class="lpp_list">
			<view class="lpp_l_i" v-for="(item,index) in dataList" :key="index">
				<view class="lpp_l_text">未开奖</view>
				<!-- <view class="lpp_l_text_w">已开奖</view> -->
				<view class="lpp_l_line"></view>
				<view class="lpp_l_info">
					<image class="lpp_l_img" src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/fa595ffe1e8e425794382f90f550f891.jpg" mode="aspectFill"></image>
					<view class="lpp_l_word">
						<view class="w_title ellipseHide_two">百年谭鸭血-鸭血火锅创造者数字宝箱一号</view>
						<view class="w_other">
							<view class="wo_but">奖池累计：90000元</view>
							<view class="wo_rule">
								<text>玩法规则</text>
								<image src="/static/wallet/wallet_next02.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
			}
		},
		onLoad() {
			this.getDataList()
		},
		methods: {
			async getDataList() {
				uni.showLoading({
					title: '加载中'
				})
				var _this = this
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				try {
					const res = await this.$api.getAnnouncementList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					var el = res.result.records
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(el); //将数据拼接在一起
					} else {
						this.dataList = el
					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				// this.moreShop = 'noMore'
			} else {
				// this.moreShop = 'more'
				this.pageNum++; //每触底一次 page + 1;
				this.getDataList()
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #F2F5F8;
	}

	view {
		box-sizing: border-box;
	}
	.lucky-prize-pool{
		padding: 20rpx;
	}
	.lpp_real_name{
		display: flex;
		flex-direction: row;
		color: #CF2B2B;
		font-size: 24rpx;
		width: 710rpx;
		margin: 0 auto;
		padding: 20rpx 16rpx;
		background: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
	}
	.lpp_real_name .lpp_word{
		flex: 1;
	}
	.lpp_real_name .red_right{
		margin-left: 10rpx;
	}
	.red_right image{
		width: 16rpx;
		height: 16rpx;
	}
	.lpp_l_i{
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}
	.lpp_l_text{
		width: 100%;
		font-size: 30rpx;
		padding: 24rpx 36rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}
	.lpp_l_text_w{
		width: 100%;
		font-size: 30rpx;
		padding: 24rpx 36rpx;
		color: #222222;
	}
	.lpp_l_line{
		width: 100%;
		padding: 0 20rpx;
		border-bottom: 2rpx solid #D8D8D8;
	}
	.lpp_l_info{
		display: flex;
		flex-direction: row;
		padding: 24rpx 30rpx;
	}
	.lpp_l_info .lpp_l_img{
		width: 142rpx;
		height: 142rpx;
		border-radius: 16rpx;
		margin-right: 30rpx;
	}
	.lpp_l_word{
		flex: 1;
	}
	.w_title{
		font-size: 30rpx;
		color: #222222;
		margin-bottom: 18rpx;
		font-weight: 600;
	}
	.w_other{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.wo_but{
		color: #FE3131;
		font-size: 22rpx;
		border: 2rpx solid #FE3131;
		border-radius: 4rpx;
		padding: 2rpx 16rpx;
	}
	.wo_rule{
		color: #444444;
		font-size: 26rpx;
	}
	.wo_rule image{
		margin-top: 2rpx;
		width: 10rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}
</style>
